<template>
	<view class="conterakpap">
		<view class="radius_box">
			<view class="sha_box">
				<image :src="imgUrl + '/appStatic/images/timeKey.png'"  mode=""></image>
				<text style="padding: 0 0 0 40rpx">时之匙</text>
			</view>
			<view class="price_box">{{ shiNums }}</view>
			<view class="search_form">当前市场单个时之匙LP = {{ timeKeyRate }}时之匙</view>
			<view class="Blockchain_name">
				<view class="">0x31boa8kwaouiw...</view>
				<view style="margin-top: 15rpx">
					<u--image width="20rpx" height="20rpx" :src="imgUrl+'/static/images/iconimgpopoak47.png'" @click="copyText" mode=""></u--image>
				</view>
			</view>
		</view>
		<!-- 嘤嘤 -->
		<view class="akliuiui">
			<view class="kun_box">
				<view style="color: #ffffff; font-size: 31rpx">燃烧宝库</view>
				<view style="color: #ffffff; font-size: 24rpx; margin-top: 26rpx">存入一个时之匙每日可获得</view>
				<view style="display: flex; margin-top: 5rpx">
					<view style="margin-top: 5rpx">
						<image :src="imgUrl + '/appStatic/images/timeKey.png'"  mode=""></image>
					</view>
					<view style="font-size: 37rpx; color: #fbbe30; margin-left: 5rpx">0.15248</view>
					<view style="color: #ffffff; font-size: 24rpx; margin-top: 6rpx">个</view>
				</view>
			</view>
			<view class="kun_box">
				<view style="color: #ffffff; font-size: 31rpx">我的存入</view>
				<view style="display: flex; margin-top: 12rpx">
					<view style="margin-top: 5rpx">
						<image :src="imgUrl + '/appStatic/images/timeKey.png'"  mode=""></image>
					</view>
					<view style="font-size: 37rpx; color: #fbbe30; margin-left: 5rpx">{{ myTimeKeyLpInPackage ? myTimeKeyLpInPackage : '0' }}</view>
					<view style="color: #ffffff; font-size: 24rpx; margin-top: 6rpx">个</view>
					<view @click="show = true" class="button">存入</view>
					<view @click="onshow = true" class="button">取出</view>
				</view>
			</view>

			<view class="kun_box">
				<view style="color: #ffffff; font-size: 31rpx">用户总存入量</view>
				<view style="display: flex; margin-top: 12rpx">
					<view style="margin-top: 5rpx">
						<image :src="imgUrl + '/appStatic/images/timeKey.png'"  mode=""></image>
					</view>
					<view style="font-size: 37rpx; color: #fbbe30; margin-left: 5rpx">{{ vaultTotalAmount }}</view>
					<view style="color: #ffffff; font-size: 24rpx; margin-top: 6rpx">个</view>
				</view>
			</view>
		</view>
		<view class="Setupthes">
			<view class="kun_box">
				<view style="display: flex; justify-content: space-between">
					<view style="display: flex">
						<view>
							<image :src="imgUrl + '/appStatic/images/huo.png'" mode=""></image>
						</view>
						<view style="color: #ffffff; font-size: 31rpx; margin-left: 40rpx">历史获得：</view>
					</view>
					<view style="display: flex">
						<view style="color: #ffffff; font-size: 31rpx">日志</view>
						<view @click="goecord" style="margin-top: 6rpx">
							<u-icon name="arrow-right" color="#fff"></u-icon>
						</view>
					</view>
				</view>

				<view style="display: flex; margin-top: 42rpx">
					<view style="">
						<image :src="imgUrl + '/appStatic/images/timeKey.png'"  mode=""></image>
					</view>
					<view style="font-size: 37rpx; color: #fbbe30; margin-left: 40rpx">{{ totalParticipateAmount }}</view>
					<view style="color: #ffffff; font-size: 24rpx; margin-top: 6rpx">个</view>
				</view>
			</view>
		</view>
		<view class="number">
			时之匙资源燃烧宝库奖励来源于未成功逃跑赛道时之沙的手续费，用户存入时之匙越多时间越久，可获得的勋章奖励就越多，奖励会在第二天进行结算每次存入、取出时之匙会收取
			0.1%手续费，手续费将留在宝库中。
		</view>
		<!-- 弹框 -->
		<u-popup bgColor='transparent' :show="show" :round="45" mode="bottom" @close="close">
			<view class="close">
				<u-icon @click="closePopup" class="closethree" color="#333" size="15" bold name="close"></u-icon>
				<view class="iomage_box">
					<view class="popopo">
						<image :src="imgUrl + '/appStatic/images/cun.png'" mode=""></image>
					</view>
					<view style="margin-left: 26rpx">
						<view style="font-size: 42rpx; font-weight: 700; color: #000000">立刻存入</view>
						<view style="font-size: 24rpx; font-weight: 500; color: #76767a; margin-top: 20rpx">我的时之匙：{{ shiNums }}个</view>
					</view>
				</view>
				<view class="box_pop">
					<view class="box_price">
						<view class="">数量</view>
						<view class="input_box">
							<u-number-box v-model="value" :max="shiNums" :min="1">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" @input="checkInput" type="number" v-model="value" style="width: 50px; text-align: center" class="input">{{ value }}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#333" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
					<view class="price_box" @click="totalNum">全部</view>
				</view>
				<view class="button" @click="confirmCun">确定</view>
			</view>
		</u-popup>
		<u-popup bgColor='transparent' :show="onshow" :round="45" mode="bottom" @close="onclose">
			<view class="close">
				<u-icon @click="onclosePopup" class="closethree" color="#333" size="15" bold name="close"></u-icon>
				<view class="iomage_box">
					<view class="popopo">
						<image :src="imgUrl + '/appStatic/images/cun.png'" mode=""></image>
					</view>
					<view style="margin-left: 26rpx">
						<view style="font-size: 42rpx; font-weight: 700; color: #000000">立刻取出</view>
						<view style="font-size: 24rpx; font-weight: 500; color: #76767a; margin-top: 20rpx">我存入的时之匙LP：{{ myTimeKeyLpInPackage }}个</view>
					</view>
				</view>
				<view class="box_pop">
					<view class="box_price">
						<view class="">数量</view>
						<view class="input_box">
							<u-number-box v-model="value1" :max="numberLp" :min="1">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" @input="checkInput" type="number" v-model="value1" style="width: 50px; text-align: center" class="input">{{ value1 }}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#333" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
					<view class="price_box" @click="totalNum1">全部</view>
				</view>
				<view class="button" @click="onconfirmCun">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/config';
import { getUserBalance, saveTimeKeysToParkourVault, exchangeRate, getMyParkourColdRecord, getTimeKeysFrom, getUserParkourVaultInfo } from '@/api/burn/burn.js';
export default {
	data() {
		return {
			onshow: false,
			show: false,
			value: 1,
			value1: 1,
			shiNums: '',
			totalParticipateAmount: '',
			numberLp: '',
			timeKeyRate: '',
			vaultTotalAmount: '',
			myTimeKeyLpInPackage: '',
			shiNumss: '',
			imgUrl: config.imgUrl,
		};
	},
	created() {
		this.getmyrest();
		this.getMy();
		this.getexchangeRate();
		this.getUserParkInfo();
	},

	onShow() {
		this.getmyrest();
		this.getMy();
		this.getexchangeRate();
		this.getUserParkInfo();
	},
	methods: {
		close() {
			this.show = false;
		},
		onclose() {
			this.onshow = false;
		},
		closePopup() {
			this.show = false;
			this.value = 1;
		},
		onclosePopup() {
			this.onshow = false;
			this.value1 = 1;
		},
		goecord() {
			uni.navigateTo({
				url: '/pages/burnparkour/ecord'
			});
		},
		async getmyrest() {
			let param = {};
			param.propId = 3;
			const data = await getUserBalance(param);
			this.shiNums = data.data.numberRemainder;
			this.numberLp = data.data.numberLp;
			// console.log(data, '时之沙');
		},
		totalNum() {
			this.value = this.shiNums;
		},
		totalNum1() {
			this.value1 = this.myTimeKeyLpInPackage;
		},
		async confirmCun() {
			let param = {};
			param.amount = this.value;
			const data = await saveTimeKeysToParkourVault(param);
			// console.log(data, '存入成功');
			this.$modal.showToast(data.data);
			this.show = false;
			this.value = '';
			this.getUserParkInfo();
		},
		async onconfirmCun() {
			let param = {};
			param.amount = this.value1;
			const data = await getTimeKeysFrom(param);
			// console.log(data, '取出成功');
			this.$modal.showToast(data.data);
			this.onshow = false;
			this.value = '';
			this.getUserParkInfo();
		},
		// 复制
		copyText() {
			const text = 'x31boa8kwaouiw...'; //这里放入接口拿到的数据
			uni.setClipboardData({
				data: text,
				success: () => {
					// console.log('复制成功');
				},
				fail: () => {
					// console.log('复制失败');
				}
			});
		},
		async getMy() {
			const data = await getMyParkourColdRecord();
			this.totalParticipateAmount = data.data.totalParticipateAmount;
		},
		async getexchangeRate() {
			const res = await exchangeRate();
			// console.log(res, 'exchangeRate');
		},
		async getUserParkInfo() {
			const data = await getUserParkourVaultInfo();
			// console.log(data, '燃烧宝库信息');
			this.timeKeyRate = data.data.timeKeyLpToTimeKeyExchangeRate;
			this.vaultTotalAmount = data.data.vaultTotalAmount;
			this.myTimeKeyLpInPackage = data.data.myTimeKeyLpInPackage;
			this.shiNums = data.data.myTimeKeyInPackage;
		}
	}
};
</script>

<style lang="scss" scoped>
.conterakpap {
	padding: 34.88rpx;

	.radius_box {
		width: 680rpx;
		height: 350rpx;
		// background-color: pink;
		border-bottom: 1rpx solid #323337;

		.sha_box {
			text-align: center;
			font-size: 31rpx;
			font-family: 'font';
			font-weight: 700;
			color: #ffffff;

			image {
				width: 37rpx;
				height: 37rpx;
				position: absolute;
				margin: 2rpx 0 0 0;
			}
		}

		.price_box {
			font-size: 70rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			padding: 34.88rpx 0;
		}

		.search_form {
			font-size: 26rpx;
			font-family: 'font';
			font-weight: 400;
			color: #999999;
			text-align: center;
			margin: 0 0 34.88rpx 0;
		}

		.Blockchain_name {
			width: 350rpx;
			height: 45rpx;
			background: #242424;
			border-radius: 21rpx;
			opacity: 1;
			margin: auto;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #aeaeae;
			line-height: 45rpx;
			display: flex;
			padding: 0 29rpx 0 29rpx;
		}
	}

	// 嘤嘤
	.akliuiui {
		width: 680rpx;
		height: 565rpx;
		margin: 52.33rpx 0 0 0;
		background-image: url(../../static/images/shiBao.png);
		background-size: 100% 100%;
		padding: 34.88rpx;
		font-family: 'font';

		.kun_box {
			padding: 0 0 65rpx 0;

			.button {
				width: 100rpx;
				height: 47rpx;
				background: #009fe0;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 7rpx;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				line-height: 47rpx;
				margin-left: 100rpx;
			}
		}

		image {
			width: 37rpx;
			height: 37rpx;
		}
	}

	.Setupthes {
		width: 680rpx;
		height: 183rpx;
		background: #2c3037;
		box-shadow: 0rpx 7rpx 17rpx 0rpx rgba(0, 0, 0, 0.302);
		border-radius: 14rpx;
		margin: 34.88rpx 0 47rpx 0;
		padding: 34.88rpx;

		image {
			width: 37rpx;
			height: 37rpx;
			position: absolute;
			margin: 2rpx 0 0 0;
		}
	}

	.number {
		width: 680rpx;
		font-size: 24rpx;
		font-family: 'font';
		font-weight: 400;
		color: #999999;
	}

	.close {
		//弹框大盒子
		width: 750rpx;
		height: 602rpx;
		background: linear-gradient(180deg, #cdcdcd 0%, #ffffff 100%);
		border-radius: 23rpx 23rpx 0rpx 0rpx;
		opacity: 1;

		.closethree {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			background: #f7f7f7;
			border-radius: 10rpx;
			padding: 5rpx;
		}

		.iomage_box {
			display: flex;
			padding: 26rpx 34rpx;

			.popopo {
				image {
					width: 148rpx;
					height: 134rpx;
				}
			}
		}

		.box_pop {
			width: 680rpx;
			justify-content: space-between;
			display: flex;
			margin: 0 34rpx;

			.box_price {
				width: 541rpx;
				height: 113rpx;
				background: #ffffff;
				border-radius: 10rpx;
				opacity: 1;
				display: flex;
				padding: 38rpx 30rpx;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #3d3d3d;
			}

			// 0..0
			.input_box {
				margin-left: 70rpx;
				margin-top: -10rpx;

				.minus {
					width: 80rpx;
					height: 58rpx;
					background: #f7f7f7;
					border-radius: 10rpx;
					opacity: 1;
					border: 2rpx solid #cdcdcd;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.input {
					padding: 0 20rpx;
				}

				.plus {
					width: 80rpx;
					height: 58rpx;
					background: #f7f7f7;
					border-radius: 10rpx;
					opacity: 1;
					border: 2rpx solid #cdcdcd;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			// 0..0.
			.price_box {
				width: 113rpx;
				height: 113rpx;
				background: #ffffff;
				border-radius: 10rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #3d3d3d;
				line-height: 113rpx;
				text-align: center;
			}
		}

		.button {
			width: 680rpx;
			height: 98rpx;
			// background: #cdcdcd;
			background: #009fe0;
			border-radius: 10rpx;
			margin: 52rpx 34rpx;
			text-align: center;
			line-height: 98rpx;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}
	}
}
</style>
